<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios拦截器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>  
    <button>点击发送 GET 请求</button>

    <script>
        //需求: 每一个请求都 URL 携带一个查询字符串参数,  名字: t  值: 当前的时间戳

        //请求拦截器   then 
        axios.interceptors.request.use(config => {
            console.log('请求拦截器-成功');
            //设置公共参数 config 配置对象
            config.params = {
                t: Date.now()
            }
            //设置公共的请求头
            config.headers.time = Date.now();
            //成功的回调中, 必须要返回『配置对象』
            return config;
            // throw 'abc';
        },  error => {
            console.log('请求拦截器-失败')
        });


        //响应拦截器
        axios.interceptors.response.use(response => {
            console.log('响应拦截器-成功');
            //响应拦截器, 成功的回调, 必须要返回一个值
            return response.data;
        }, error => {
            //失败的处理, 统一在这里完成
            console.log('响应拦截器-失败');
            return new Promise(() => {});
            // return Promise.reject('出问题了');
        });

        //获取按钮
        let btn = document.querySelector('button');

        btn.onclick = async function(){
            // axios({
            //     method: 'get',
            //     url: 'http://api.xiaohigh.com:8090/lo'
            // }).then(res => {
            //     console.log(res)
            // });
            
            //响应拦截器返回 pending promise 之后, await 不需要用 try catch 包裹
            let result = await axios('http://api.xiaohigh.com:8090/lol');
            console.log(result);
        }
    </script>
</body>
</html>